<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付下单页</title>
</head>
<body>
<!-- 商品信息展示及金额-->
<a id="wxPay" href="javascript:;">微信支付</a> <a href="javascript:;">支付宝支付</a>
<div id="payQrcode"></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<script>
    $(function () {
        var orderId = "";
        var flag = false;
        $('#wxPay').click(function () {
            //通过点击微信支付需要调用微信的扫码支付中的统一下单API,返回一个二维码图片出现
            $.ajax({
                type: "post",
                url: "http://0lov29o.hn3.mofasuidao.cn/wx/pay/native",
                data: {"productId": 1},//传递商品id集
                dataType: "json",
                success: function (data) {
                    orderId = data.data.orderId;
                    flag = true;
                    new QRCode(document.getElementById("payQrcode"), data.data.code_url);
                }
            })
        })
        //当前页面需要一个定时执行的任务每隔*秒进行请求
        //每隔三秒钟去执行ajax请求
        setInterval(function () {
            if (flag) {
                $.ajax({
                    type: "post",
                    url: "http://0lov29o.hn3.mofasuidao.cn/wx/pay/queryOrder",
                    data: {"orderId": orderId},//传递商品id集
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            //0代表支付成功
                            location.href = "http://0lov29o.hn3.mofasuidao.cn/app/paySuccess.html";
                        }
                    }
                })
            }
        }, 3000)
    })
</script>
</html>